<template>
  <div class="production-plan">
    <!-- 保存按钮 -->
    <el-button type="primary" @click="saveAll">保存主表单和明细</el-button>
    <h3 class="title">生产退料</h3>
    <!-- 基本信息表单 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="单据主题">
            <el-input v-model="formData.subject" placeholder="请输入主题" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据编号">
            <el-input v-model="formData.documentNumber" placeholder="请输入编号" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="*退料日期" prop="pickingDate">
            <el-date-picker
              v-model="formData.returndate"
              type="date"
              required
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制单人员">
            <el-input v-model="formData.operatorName"  disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注">
            <el-input v-model="formData.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 物料明细部分 -->
    <h2>生产退料</h2>
    <div class="detail-section">
      <h4 class="sub-title">物料明细</h4>
      <el-button size="small" @click="addNewRow">新增行</el-button>
      <el-table :data="planDetailsList" border style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="产品名称" width="180px">
          <template #default="{ row }">
            <el-input 
              v-model="row.productName" 
              :readonly="row.isSaved"
            >
              <template #suffix>
                <el-button size="mini" @click="openProductNameDialog(row)">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="产品编号">
          <template #default="{ row }">
            <el-input v-model="row.productCode" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template #default="{ row }">
            <el-input v-model="row.specification" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template #default="{ row }">
            <el-input v-model="row.unit" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="本次退料数量">
          <template #default="{ row }">
            <el-input-number 
              v-model.number="row.returnQuantity" 
              :min="0" 
              controls-position="right"
              :disabled="row.isSaved"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="可退料数量">
          <template #default="{ row }">
            <el-input-number 
              v-model.number="row.availableQuantity" 
              :min="0" 
              controls-position="right"
              :disabled="row.isSaved"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="退料原因">
          <template #default="{ row }">
            <el-input v-model="row.reason" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>s
        <el-table-column label="批号">
          <template #default="{ row }">
            <el-input v-model="row.batchNumber" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="生产日期">
          <template #default="{ row }">
            <el-date-picker
              v-model="row.productionDate"
              type="date"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="有效日期">
          <template #default="{ row }">
            <el-date-picker
              v-model="row.expirationDate"
              type="date"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="出库仓库">
          <template #default="{ row }">
            <el-input v-model="row.warehouse" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="关联领料/补料主题">
          <template #default="{ row }">
            <el-input v-model="row.relatedMaterialsSubject" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="关联项目">
          <template #default="{ row }">
            <el-input v-model="row.relatedProject" type="textarea" rows="3" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right"  label="操作" width="180px">
          <template #default="{ row }">
            <el-button size="small"  type="danger" @click="deleteDetail(row)" :disabled="row.isSaved">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form-item label="退料数量合计">
      <el-input v-model="totalReturnQuantity" @click="calculateTotal" disabled ></el-input>
    </el-form-item>
    <!-- MinIO 文件上传部分 -->
    <div id="app">
      <el-card>
        <template #header>
          <div class="flex justify-between items-center">
            <span>MinIO 文件上传</span>
          </div>
        </template>
        <el-form ref="formRef1" :model="formData1" label-width="100px">
          <el-form-item label="选择文件">
            <el-upload ref="uploadRef" action="https://localhost:7269/api/FileUpload/UploadFile" :headers="headers"
              :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :http-request="customRequest">
              <el-button type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">上传文件</el-button>
          </el-form-item>
        </el-form>
        <el-alert v-if="message" :message="message" :type="messageType" :closable="false" style="margin-top: 20px" />
      </el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="key" label="文件名称" width="200" />
        <el-table-column prop="lastModified" label="创建时间" width="200">
          <template #default="scope">
            {{ new Date(scope.row.lastModified).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="size" label="文件大小" min-width="200" />
        <el-table-column fixed="right" label="操作" min-width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openDeleteDialog(scope.row.key)">
              删除文件
            </el-button>
            <el-button link type="primary" size="small" @click="download(scope.row.key)">下载文件</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="isDeleteDialogVisible" title="删除确认" @close="closeDeleteDialog">
        <p>确定要删除该文件吗？</p>
        <template #footer>
          <el-button @click="closeDeleteDialog">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确定</el-button>
        </template>
      </el-dialog>
      <el-dialog v-model="isDownloadDialogVisible" title="文件下载">
        <template #content>
          <el-progress :percentage="downloadProgress" :status="downloadStatus"></el-progress>
        </template>
        <template #footer>
          <el-button @click="closeDownloadDialog">关闭</el-button>
        </template>
      </el-dialog>
    </div>
    <!-- 产品名称选择对话框 -->
     <!-- 物理明细产品名称选择对话框 -->
    <el-dialog
      v-model="productNameDialogVisible"
      width="500px"
      title="产品名称选择"
      append-to-body
    >
      <el-table
        :data="productNames"
        highlight-current-row
        border
        size="small"
        @current-change="handleProductNameChange"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column property="productsNumber" label="产品编号" />
        <el-table-column property="productsName" label="产品名称" />
        <el-table-column property="productsNum" label="规格型号" />
        <el-table-column property="productsUnit" label="单位" />
      </el-table>
      <template #footer>
        <el-button @click="pickProductName">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { Materialwrite , Materialread } from '@/axios/axiosHelper';
import axios from 'axios';

const formRef = ref(null);
const currentUser = ref("admin");
const router = useRouter();
const route = useRoute();

// 主表单数据，使用驼峰命名规范，使变量命名更统一
const formData = reactive({
   "subject": "",
  "documentNumber": "",
  "returndate": "",
  "operatorName": currentUser.value,
  "remark": "",
  "documentNo": "",
  "isDel": true
});

// 主表单验证规则，明确各个字段的验证规则
const rules = reactive({
  subject: [
    { required: true, message: '单据主题不能为空', trigger: 'blur' }
  ],
  documentNumber: [
    { required: true, message: '单据编号不能为空', trigger: 'blur' }
  ],
  returndate: [
    { required: true, message: '退料日期不能为空', trigger: 'blur' }
  ]
});

// 退料数量合计
const totalReturnQuantity = ref(0);
// 计算退料数量合计（可在明细数据变更时调用，此处按可退料数量计算）
const calculateTotal = () => {
  let sum = 0; 

  planDetailsList.value.forEach(row => {
    sum += row.returnQuantity;

  });
  totalReturnQuantity.value = sum;
};

// 明细数据列表，使用驼峰命名规范
const planDetailsList = ref([]);
// 附件数据（当前未使用，可根据实际需求完善相关功能）
const attachments = ref([]);

// 保存主表单和明细
const saveAll = async () => {
  if (formRef.value) {
    const isValid = await formRef.value.validate();
    if (isValid) {
      try {
        // 保存主表单
        const response = await axios.post('https://localhost:7077/api/Stripping/AddStripping', formData);
        if (response.data.code === 100) {
          formData.strippingId = response.data.data.strippingId;
          ElMessage.success('主表单保存成功');

          // 保存明细
          const saveDetailPromises = planDetailsList.value.map(async (row) => {
            const detailWithId = {
              ...row,
              strippingId: formData.strippingId
            };
            const detailResponse = await axios.post(
              'https://localhost:7077/api/StrippingDetails/Handle',
              detailWithId
            );
            if (detailResponse.data.code === 100) {
              row.isSaved = true;
              return true;
            } else {
              // 更详细的错误提示，方便定位问题
              ElMessage.error(`明细保存失败：${detailResponse.data.message}`);
              return false;
            }
          });

          const results = await Promise.all(saveDetailPromises);
          if (results.every(result => result)) {
            ElMessage.success('所有明细保存成功');
            router.push('/ShowStripping');
          }
        } else {
          // 更详细的错误提示，方便定位问题
          ElMessage.error(`主表单保存失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('保存过程中发生错误:', error.response?.data);
        ElMessage.error('保存过程中发生错误，请检查网络或联系管理员');
      }
    }
  }
};

// 新增行
const addNewRow = () => {
  planDetailsList.value.push({
    strippingDetailsId: 0,
    productName: "",
    productCode: "",
    specification: "",
    unit: "",
    returnQuantity: '',
    availableQuantity: '',
    reason: "",
    batchNumber: "",
    productionDate: "",
    expirationDate: "",
    warehouse: "",
    relatedMaterialsSubject: "",
    relatedProject: "",
    strippingId: null,
    isDel: true,
    productInfoFilled: false
  });
};

// 产品名称数据
const productNames = ref([]);
const productNameDialogVisible = ref(false);
const currentProductNameRow = ref(null);
const currentProductName = ref({});

// 获取产品信息
const fetchProducts = () => {
  axios.get("https://localhost:7095/api/Products/GetProducts")
   .then(res => {
      productNames.value = res.data.data;
      console.log("产品数据：", productNames.value);
      // 强制更新表格（原代码逻辑不完整，此处可根据实际需求完善）
    })
   .catch(error => {
      console.error('获取产品信息失败:', error);
      ElMessage.error('获取产品信息失败，请检查网络或联系管理员');
    });
};

// 打开产品名称选择对话框
const openProductNameDialog = (row) => {
  if (productNames.value.length === 0) {
    ElMessage.warning('产品信息正在加载，请稍后重试');
    return;
  }
  currentProductNameRow.value = row;
  productNameDialogVisible.value = true;
};

// 当前选中的产品名称行
const handleProductNameChange = (val) => {
  currentProductName.value = val;
};

// 选择产品名称
const pickProductName = () => {
  if (currentProductName.value && currentProductNameRow.value) {
    currentProductNameRow.value.productName = currentProductName.value.productsName;
    currentProductNameRow.value.productCode = currentProductName.value.productsNumber;
    currentProductNameRow.value.specification = currentProductName.value.productsNum;
    currentProductNameRow.value.unit = currentProductName.value.productsUnit;
    currentProductNameRow.value.productInfoFilled = true; // 设置标志位，表示产品信息已填充
    productNameDialogVisible.value = false;
  }
};

onMounted(() => {
  // 此处原代码调用了fetchAssociatedProjects()，但未定义该方法，可根据需求补充实现
  // fetchAssociatedProjects();
  fetchProducts();
});

// 监听planDetailsList的变化，当其中的availableQuantity改变时，触发calculateTotal重新计算
watch(planDetailsList, (newValue) => {
  calculateTotal();
}, { deep: true });

// MinIO 文件上传相关变量，使用驼峰命名规范
const formRef1 = ref(null);
const uploadRef = ref(null);
const formData1 = ref({});
const message = ref('');
const messageType = ref('');
const tableData = ref([{
  key: "",
  lastModified: "",
  eTag: "",
  size: 0,
  isDir: false,
  versionId: null,
  contentType: null,
  expires: null,
  userMetadata: null,
  isLatest: false,
  lastModifiedDateTime: "",
}]);
const isDeleteDialogVisible = ref(false);
const currentDeleteKey = ref('');
const isDownloadDialogVisible = ref(false);
const downloadProgress = ref(0);
const downloadStatus = ref('');

onMounted(() => {
  listObjects();
});

const download = async (key) => {
  isDownloadDialogVisible.value = true;
  downloadProgress.value = 0;
  downloadStatus.value = 'active';
  try {
    const response = await axios.get(`/api/FileUpload/DownloadFile?objectName=${key}`, {
      responseType: 'blob',
      onDownloadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        downloadProgress.value = percentCompleted;
      }
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', key);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    downloadStatus.value = 'success';
  } catch (error) {
    console.error('文件下载失败:', error);
    message.value = '文件下载失败: ' + (error.response?.data?.error || error.message);
    messageType.value = 'error';
    downloadStatus.value = 'exception';
  }
};

const listObjects = async () => {
  axios.get("https://localhost:7212/api/FileUpload/ListObjectsInOneBucket")
    .then((res) => {
      tableData.value = res.data;
      console.log("查询成功", res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const headers = {
  'Content-Type': 'multipart/form-data'
};

const customRequest = async (options) => {
  const formData1 = new FormData();
  formData1.append('file', options.file);
  const response = await axios.post(options.action, formData1, {
    headers: headers
  });
  options.onSuccess(response.data);
  if (response.data != null) {
    alert("添加成功");
    return;
  } else {
    alert("添加失败");
    return;
  }
};

const handleError = (error) => {
  message.value = '上传失败: ' + (error.response?.data?.error || error.message);
  messageType.value = 'error';
};

const submitForm = () => {
  uploadRef.value.submit();
};

const openDeleteDialog = (key) => {
  currentDeleteKey.value = key;
  isDeleteDialogVisible.value = true;
};

const closeDeleteDialog = () => {
  isDeleteDialogVisible.value = false;
  currentDeleteKey.value = '';
};

const confirmDelete = () => {
  axios.delete("https://localhost:7212/api/FileUpload/DeleteObjectInOneBucket", {
    params: {
      objectName: currentDeleteKey.value
    }
  })
    .then((res) => {
      console.log("删除成功", res.data);
      message.value = '文件删除成功';
      messageType.value = 'success';
      listObjects();
      closeDeleteDialog();
    })
    .catch((err) => {
      console.log(err);
      message.value = '文件删除失败: ' + (err.response?.data?.error || err.message);
      messageType.value = 'error';
      closeDeleteDialog();
    });
};

const closeDownloadDialog = () => {
  isDownloadDialogVisible.value = false;
  downloadProgress.value = 0;
  downloadStatus.value = '';
};
</script>

<style scoped>
.production-plan {
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.sub-title {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.detail-section,
.attachment-section {
  margin-top: 20px;
}

.el-table {
  margin-top: 10px;
}
</style>